import rightMenu from "./RightMenu.vue";
import {
  clearSelectionChange,
  collectSelection,
  isHasSelectionChange, restoreSelection,
} from "../z-right-menu/state";


// 挂载后的dom节点
let menuVM = null;

const MENU_ID = 'Z_CTC_rightMenuDom'

export function installRightMenu(Vue) {


  /**
   * 将组件挂在到节点上
   * @param comp 需要挂载的组件
   * @param prop 向组件传的参数
   */
  const creatComp = function(comp, prop) {
    // 创建组件
    const app = Vue.extend(comp);
    // 创建一个div元素
    const divEle = document.createElement("div");
    // 将创建的div元素挂载追加至body里
    document.body.appendChild(divEle);
    // 将组件挂载至刚才创建的div中, 使用propsData进行传参
    new app({
      propsData: {
        ...prop
      }
    }).$mount(divEle);
    // 返回挂载的元素，便于操作
    return divEle;
  };

  // 监听全局点击，销毁右键菜单dom
  document.body.addEventListener("click", (e) => {
    if (menuVM != null) {
      // 销毁右键菜单DOM
      let dom = document.getElementById(MENU_ID)
      // console.log('onClick', e.target , dom.contains(e.target))
      if (dom.contains(e.target)) {
        restoreSelection()
      } else {
        clearSelectionChange()
      }

      document.body.removeChild(dom);
      menuVM = null;
    }
  });

  Vue.directive("rightClick", (el, binding) => {
    // 指令绑定元素元素是否存在判断
    if (el == null) {
      throw "右键指令错误：元素未绑定";
    }

    el.oncontextmenu = function(e) {
      if (menuVM != null) {
        // 销毁上次触发的右键菜单DOM
        document.body.removeChild(document.getElementById(MENU_ID));
        menuVM = null;
      }
      // document.body.addEventListener("click", onClick)
      // console.log(isHasSelectionChange())
      collectSelection()
      let hasSelectionChange = isHasSelectionChange()
      const textArray = binding.value.text({
        hasSelectionChange,
        target: el
      });
      const handlerObj = binding.value.handler;
      const parameter = binding.arg;
      // console.log(parameter)
      // 菜单选项与事件处理函数是否存在
      if (textArray == null || handlerObj == null) {
        throw "右键菜单内容与事件处理函数为必传项";
      }
      // 事件处理数组
      const handlerArray = [];
      // 处理好的右键菜单
      const menuList = [];
      // 将事件处理函数放入数组中
      // for (const key in handlerObj) {
      //   handlerArray.push(handlerObj[key]);
      // }
      // if (textArray.length !== handlerArray.length) {
      //   // 文本数量与事件处理不对等
      //   throw "右键菜单的每个选项，都必须有它的事件处理函数";
      // }
      // 追加右键菜单数据
      for (let i = 0; i < textArray.length; i++) {
        // 右键菜单对象, 添加名称
        const menuObj = {
          text: textArray[i],
          handler: function (name, parameter) {
            if (handlerObj[name]) {
              handlerObj[name](parameter, binding.arg)
            }
          },
          id: i + 1
        };
        // 动态参数不为空则追加
        // console.log(parameter)
        if (parameter != null) {
          menuObj.parameter = parameter;
        }
        menuList.push(menuObj);
      }
      // 鼠标点的坐标
      const oX = e.clientX;
      const oY = e.clientY;
      // 动态挂载组件，显示右键菜单
      menuVM = creatComp(rightMenu, {
        rightMenuID: MENU_ID,
        rightMenuStatus: "block",
        rightMenuTop: oY + "px",
        rightMenuLeft: oX + "px",
        rightMenuList: menuList,
        rightMenuTarget: el
      });
      return false;
    };
  });
}
